import * as api from '@/services/broadcastIp';
import {
  CheckCircleFilled,
  EditOutlined,
} from '@ant-design/icons';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
  Badge,
  Tag,
} from 'antd';
import React, { useRef, useState } from 'react';
import NodeForm from '../VpnServer/components/VpnServerForm';

type VpnServerFormProps = {
  visible: boolean;
  current: API.BroadcastIp | undefined;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel,  current } = props;

  if (!visible) {
    return null;
  }

  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const [formNodeVisible, setFormNodeVisible] = useState<boolean>(false);
  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>(undefined,);
  
  const logColumns: ProColumns<API.BroadcastIpLog>[] = [
    {
      title: '状态',
      align: 'center',
      width: 80,
      dataIndex: 'status',
      search: false,
      renderText: (val) => {
        return val ? (
          <Badge count={<CheckCircleFilled style={{ color: 'grey' }} />} />
        ) : (
          <Badge count={<CheckCircleFilled style={{ color: '#52c41a' }} />} />
        );
      },
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      render:(_, record) => {
        return <>
          {record.inUsed == true ? <Tag color='success'>{record.ip}</Tag> : record.ip}
        </>;
      }
    },
    {
      title: '生成时间',
      dataIndex: 'createTime',
    },
    {
      title: '使用实例',
      dataIndex: 'instanceId',
      render:(_, record) => {
        return record.instanceId ? <>
          {record.instanceId}
          <a onClick={(e) => {
              if(record.serverId){
                setFormNodeVisible(true);
                setCurrentNodeId(record.serverId);
              }
            }}
          >{' '}<EditOutlined />
          </a>
        </> : '';
      }
    },
    {
      title: '使用时间',
      dataIndex: 'updateTime',
    },
    {
      title: '使用人',
      dataIndex: 'updateUser',
    },
  ];

  return (
    <DrawerForm<API.CheckTask>
      open={visible}
      title={
        <>
          IP使用记录 <Tag color="blue">{current?.ip}</Tag>
        </>
      }
      formRef={formRef}
      autoFocusFirstInput
      width={1200}
      // onFinish={handleFormSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [defaultDoms[0]];
        },
      }}
    >

      <ProTable<API.BroadcastIpLog>
        rowKey="id"
        actionRef={actionRef}
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        search={false}
        columns={logColumns}
        expandable={undefined}
        // rowSelection={{
        //   defaultSelectedRowKeys: [],
        //   // onChange: (selectedRowKeys, selectedRows) => {
        //   //   setSelectIds(selectedRowKeys);
        //   // },
        // }}
        params={{
          ipId: current?.id
        }}
        request={api.logs}
        pagination={{
          defaultPageSize: 100,
          pageSizeOptions: [
            '50',
            '100',
            '200',
            '300',
          ],
          hideOnSinglePage: false,
        }}
      />

      
      <NodeForm
        visible={formNodeVisible}
        loadNodeId={currentNodeId}
        checks={undefined}
        defaultGroupIds={undefined}
        onSubmit={async() =>{
          setCurrentNodeId(undefined);
          setFormNodeVisible(false);
        }}
        onCancel={() => {
          setFormNodeVisible(false);
          setCurrentNodeId(undefined);
        }}
      />



    </DrawerForm>
  );
};

export default VpnServerForm;
